import React, { useEffect, useRef } from 'react';
import MainLayout from '@/components/layout/MainLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faHeartPulse,
  faDroplet,
  faWeight,
  faCalendarDays,
  faChevronRight,
  faBoltLightning,
  faSliders,
  faStethoscope,
  faLungs,
  faBell
} from '@fortawesome/free-solid-svg-icons';
import Chart from 'chart.js/auto';

export default function Data() {
  // 引用图表DOM元素
  const activityChartRef = useRef<HTMLCanvasElement>(null);
  const sleepChartRef = useRef<HTMLCanvasElement>(null);
  const sleepScoreChartRef = useRef<HTMLCanvasElement>(null);
  const nutrientChartRef = useRef<HTMLCanvasElement>(null);

  // 创建图表
  useEffect(() => {
    // 活动趋势图表
    if (activityChartRef.current) {
      const activityCtx = activityChartRef.current.getContext('2d');
      if (activityCtx) {
        const activityChart = new Chart(activityCtx, {
          type: 'line',
          data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '今天'],
            datasets: [{
              label: '步数',
              data: [8542, 7621, 9354, 6852, 10245, 7862, 7245],
              borderColor: '#3B82F6',
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              tension: 0.3,
              fill: true
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false
              }
            },
            scales: {
              y: {
                beginAtZero: false,
                grid: {
                  display: true,
                  color: 'rgba(0, 0, 0, 0.05)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });

        return () => {
          activityChart.destroy();
        };
      }
    }
  }, [activityChartRef]);

  // 睡眠周期图表
  useEffect(() => {
    if (sleepChartRef.current) {
      const sleepCtx = sleepChartRef.current.getContext('2d');
      if (sleepCtx) {
        const sleepChart = new Chart(sleepCtx, {
          type: 'line',
          data: {
            labels: ['22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            datasets: [{
              label: '睡眠周期',
              data: [0, 2, 3, 4, 2, 3, 4, 3, 2, 0],
              borderColor: '#4F46E5',
              backgroundColor: 'rgba(79, 70, 229, 0.1)',
              tension: 0.4,
              fill: true,
              pointRadius: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                max: 4,
                ticks: {
                  stepSize: 1,
                  callback: function(value) {
                    if(value === 0) return '清醒';
                    if(value === 1) return 'REM';
                    if(value === 2) return '浅睡';
                    if(value === 3) return '中睡';
                    if(value === 4) return '深睡';
                  }
                },
                grid: {
                  display: true,
                  color: 'rgba(0, 0, 0, 0.05)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });

        return () => {
          sleepChart.destroy();
        };
      }
    }
  }, [sleepChartRef]);

  // 睡眠评分图表
  useEffect(() => {
    if (sleepScoreChartRef.current) {
      const scoreCtx = sleepScoreChartRef.current.getContext('2d');
      if (scoreCtx) {
        const sleepScoreChart = new Chart(scoreCtx, {
          type: 'doughnut',
          data: {
            datasets: [{
              data: [85, 15],
              backgroundColor: [
                '#4F46E5',
                '#EEF2FF'
              ],
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '80%',
            plugins: {
              legend: {
                display: false
              },
              tooltip: {
                enabled: false
              }
            }
          }
        });

        return () => {
          sleepScoreChart.destroy();
        };
      }
    }
  }, [sleepScoreChartRef]);

  // 营养素摄入比例图表
  useEffect(() => {
    if (nutrientChartRef.current) {
      const nutrientCtx = nutrientChartRef.current.getContext('2d');
      if (nutrientCtx) {
        const nutrientChart = new Chart(nutrientCtx, {
          type: 'doughnut',
          data: {
            labels: ['蛋白质', '碳水', '脂肪'],
            datasets: [{
              data: [25, 55, 20],
              backgroundColor: [
                '#3B82F6',
                '#10B981',
                '#F59E0B'
              ],
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
              legend: {
                display: false
              }
            }
          }
        });

        return () => {
          nutrientChart.destroy();
        };
      }
    }
  }, [nutrientChartRef]);

  return (
    <MainLayout title="HealthHub - 数据中心">
      {/* 顶部状态栏 */}
      <div className="bg-primary text-white p-4 flex justify-between items-center">
        <div className="flex items-center">
          <span className="font-bold text-xl">数据中心</span>
        </div>
        <div className="flex items-center space-x-3">
          <FontAwesomeIcon icon={faCalendarDays} className="text-xl" />
          <div className="w-12 h-12 rounded-lg overflow-hidden">
            <img src="https://images.unsplash.com/photo-1565074035678-58f95dedd305?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100" 
                 alt="膳食图片" className="w-full h-full object-cover" />
          </div>
        </div>
      </div>

      {/* 数据时间范围选择器 */}
      <div className="p-4 bg-white border-b border-gray-100">
        <div className="flex justify-between items-center">
          <h2 className="text-lg font-semibold">健康数据</h2>
          <div className="flex space-x-2">
            <button className="px-3 py-1 text-xs rounded-full bg-primary text-white">今日</button>
            <button className="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">本周</button>
            <button className="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">本月</button>
            <button className="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">
              <FontAwesomeIcon icon={faSliders} className="text-gray-500" />
            </button>
          </div>
        </div>
      </div>

      {/* 数据内容区域 */}
      <div className="p-4">
        {/* 数据概览卡片 */}
        <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-4 text-white mb-5 shadow-md">
          <div className="flex justify-between items-center mb-3">
            <div>
              <h3 className="font-medium text-sm opacity-90">今日活动</h3>
              <p className="text-2xl font-bold">1,240</p>
              <p className="text-xs opacity-80">卡路里</p>
            </div>
            <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
              <FontAwesomeIcon icon={faBoltLightning} className="text-yellow-300 text-2xl" />
            </div>
          </div>
          <div className="flex justify-between text-sm">
            <div>
              <p className="opacity-90">7,245</p>
              <p className="text-xs opacity-80">步数</p>
            </div>
            <div>
              <p className="opacity-90">5.2</p>
              <p className="text-xs opacity-80">公里</p>
            </div>
            <div>
              <p className="opacity-90">124</p>
              <p className="text-xs opacity-80">活动分钟</p>
            </div>
          </div>
        </div>

        {/* 数据图表区域 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-semibold">活动趋势</h3>
            <div className="flex space-x-2">
              <button className="px-2 py-1 text-xs rounded-md bg-blue-100 text-blue-600">步数</button>
              <button className="px-2 py-1 text-xs rounded-md bg-gray-100 text-gray-500">卡路里</button>
              <button className="px-2 py-1 text-xs rounded-md bg-gray-100 text-gray-500">距离</button>
            </div>
          </div>
          <div className="h-64">
            <canvas ref={activityChartRef}></canvas>
          </div>
        </div>

        {/* 睡眠数据分析 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-semibold">睡眠分析</h3>
            <span className="text-xs text-gray-400">最近7天</span>
          </div>
          {/* 睡眠时间图表 */}
          <div className="mb-3">
            <div className="flex justify-between items-center mb-1">
              <span className="text-sm text-gray-500">睡眠时长</span>
              <span className="text-sm font-medium">7.5小时</span>
            </div>
            {/* 睡眠质量条形图 */}
            <div className="h-5 bg-gray-100 rounded-full overflow-hidden flex">
              <div className="h-full bg-indigo-700" style={{width: '15%'}}></div>
              <div className="h-full bg-indigo-500" style={{width: '45%'}}></div>
              <div className="h-full bg-indigo-300" style={{width: '25%'}}></div>
              <div className="h-full bg-gray-200" style={{width: '15%'}}></div>
            </div>
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>深睡 1.1h</span>
              <span>浅睡 3.4h</span>
              <span>REM 1.9h</span>
              <span>清醒 1.1h</span>
            </div>
          </div>
          {/* 睡眠周期图表 */}
          <div className="h-36">
            <canvas ref={sleepChartRef}></canvas>
          </div>
          {/* 睡眠评分 */}
          <div className="flex justify-between items-center mt-3">
            <div>
              <span className="text-sm text-gray-500">睡眠评分</span>
              <div className="flex items-center mt-1">
                <span className="text-xl font-bold mr-1">85</span>
                <span className="text-xs text-green-500">↑ 5%</span>
              </div>
            </div>
            <div className="w-20 h-20 relative">
              <canvas ref={sleepScoreChartRef}></canvas>
            </div>
          </div>
        </div>

        {/* 健康指标概览 */}
        <h3 className="font-semibold mb-3">健康指标</h3>
        <div className="grid grid-cols-2 gap-3 mb-5">
          {/* 体重指标 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm text-gray-500">体重</span>
              <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                <FontAwesomeIcon icon={faWeight} className="text-green-500 text-sm" />
              </div>
            </div>
            <div className="flex items-baseline">
              <span className="text-2xl font-bold">68.5</span>
              <span className="text-sm text-gray-500 ml-1">kg</span>
            </div>
            <div className="flex items-center mt-1">
              <span className="text-xs text-green-500 mr-1">↓ 0.3</span>
              <span className="text-xs text-gray-400">vs 上周</span>
            </div>
          </div>
          
          {/* 心率指标 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm text-gray-500">平均心率</span>
              <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                <FontAwesomeIcon icon={faHeartPulse} className="text-red-500 text-sm" />
              </div>
            </div>
            <div className="flex items-baseline">
              <span className="text-2xl font-bold">72</span>
              <span className="text-sm text-gray-500 ml-1">BPM</span>
            </div>
            <div className="flex items-center mt-1">
              <span className="text-xs text-gray-400">静息心率: 62 BPM</span>
            </div>
          </div>
          
          {/* 血压指标 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm text-gray-500">血压</span>
              <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                <FontAwesomeIcon icon={faStethoscope} className="text-blue-500 text-sm" />
              </div>
            </div>
            <div className="flex items-baseline">
              <span className="text-2xl font-bold">120/80</span>
              <span className="text-sm text-gray-500 ml-1">mmHg</span>
            </div>
            <div className="flex items-center mt-1">
              <span className="text-xs text-green-500 mr-1">正常</span>
            </div>
          </div>
          
          {/* 血氧指标 */}
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm text-gray-500">血氧饱和度</span>
              <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                <FontAwesomeIcon icon={faLungs} className="text-purple-500 text-sm" />
              </div>
            </div>
            <div className="flex items-baseline">
              <span className="text-2xl font-bold">98</span>
              <span className="text-sm text-gray-500 ml-1">%</span>
            </div>
            <div className="flex items-center mt-1">
              <span className="text-xs text-green-500 mr-1">优秀</span>
            </div>
          </div>
        </div>

        {/* 营养摄入分析 */}
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-8">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-semibold">今日营养摄入</h3>
            <button className="text-xs text-primary">详情</button>
          </div>
          
          {/* 卡路里进度 */}
          <div className="mb-4">
            <div className="flex justify-between items-center mb-1">
              <span className="text-sm text-gray-500">总卡路里</span>
              <span className="text-sm font-medium">1,450 / 2,000 卡</span>
            </div>
            <div className="w-full bg-gray-100 rounded-full h-2.5">
              <div className="bg-orange-500 h-2.5 rounded-full" style={{width: '72.5%'}}></div>
            </div>
          </div>
          
          {/* 营养素摄入比例 */}
          <div className="flex justify-between mb-3">
            <div className="w-24 h-24 relative">
              <canvas ref={nutrientChartRef}></canvas>
              <div className="absolute inset-0 flex items-center justify-center flex-col">
                <span className="text-xs text-gray-500">剩余</span>
                <span className="font-bold">550</span>
                <span className="text-xs text-gray-500">卡</span>
              </div>
            </div>
            <div className="flex-1 pl-3 flex flex-col justify-center">
              <div className="flex items-center mb-2">
                <div className="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                <div className="flex-1 flex justify-between">
                  <span className="text-sm">蛋白质</span>
                  <span className="text-sm font-medium">65g</span>
                </div>
              </div>
              <div className="flex items-center mb-2">
                <div className="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                <div className="flex-1 flex justify-between">
                  <span className="text-sm">碳水</span>
                  <span className="text-sm font-medium">210g</span>
                </div>
              </div>
              <div className="flex items-center">
                <div className="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                <div className="flex-1 flex justify-between">
                  <span className="text-sm">脂肪</span>
                  <span className="text-sm font-medium">45g</span>
                </div>
              </div>
            </div>
          </div>
          
          {/* 水分摄入 */}
          <div>
            <div className="flex justify-between items-center mb-1">
              <span className="text-sm text-gray-500">水分摄入</span>
              <span className="text-sm font-medium">1.2 / 2.0 L</span>
            </div>
            <div className="w-full bg-gray-100 rounded-full h-2.5">
              <div className="bg-cyan-500 h-2.5 rounded-full" style={{width: '60%'}}></div>
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  );
} 